{template 'header'}
<style>
    .bg {
        background-image: url("{MODULE_URL}assets/img/logo_bg.png");
        position: fixed;
        z-index: -1;
        opacity: .8;
        width: 100vw;
        height: 100vh;
        top: 0;
        background-size: 100% 100%;
    }
    .cent{
        width: 80vw;
        background: rgba(255,255,255,.3);
        border-radius: 3vw;
        position: fixed;
        top:24vh;
        left: calc(50% - 40vw);
        padding-bottom: 20px;
    }
    ul{
        list-style: none;
        padding: 0;
    }
    .cent input{
        border: none;
        font-size: 14px;
        width: 90%;
        background: #fff;
        margin-left: 5%;
        padding-left: 10vw;
    }
    .cent ul li{
        position: relative;
    }
    .cent ul li span{
        position: absolute;
        top: 1vh;
        left: 7vw;
    }
    .mui-btn{
        width: 80%;
        margin: 1vh auto;
        font-size: 14px;
        padding: 8px;
        background: #2bcd47;
    }
    .cent h5{
        text-align: center;
        font-size: 24px;
        letter-spacing: 2rem;
        padding-left: 7vw;
    }
    .login-logo{
        width: 20vw;
        height: 20vw;
        background: #008cff ;
        border-radius: 50%;
        margin: -56px auto 0 auto;
        text-align: center;
        line-height: 20vw;
        padding-top: 1vh;
    }
    .login-logo i{
        color: #fff;
        text-align: center;
        font-size: 12vw;
    }
    .mui-btn-green{
        background: #008cff;
        border:none;
    }
    .register ,.forget{
        font-size: 12px;
        color: #fff;
        padding-left: 12px;
    }
    .forget{
        text-align: right;
        padding-right: 12px;
    }
</style>
</head>
<body>
<!-- 头部 结束 -->
<div class="bg"></div>
<div class="cent" id="login-1">
    <div class="login-logo"><i class="mui-icon mui-icon-contact"></i></div>
    <h5>登录</h5>
    <ul>
        <li>
            <span class="mui-icon mui-icon-person"></span>
            <input type="text" placeholder="请输入手机号" id="mobile">
        </li>
        <li>
            <span class="mui-icon mui-icon-locked"></span>
            <input type="password" placeholder="请输入密码" id="password">
        </li>
        <button class="mui-btn mui-btn-block mui-btn-green" onclick="login()">登录</button>
    </ul>
    <div class="mui-row">
        <a href="{php echo $this->createMobileUrl('public',array('op'=>'register'))}" class="mui-col-xs-6 mui-col-sm-6 register">账号注册</a>
<!--        <a href="{php echo $this->createMobileUrl('public',array('op'=>'forgot'))}" class="mui-col-xs-6 mui-col-sm-6 forget">忘记密码</a>-->
    </div>

</div>
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script src="{MODULE_URL}assets/js/mui.min.js"></script>
<script>
    function login(){
        var mobile = $('#mobile').val();
        var password = $('#password').val();
        if(mobile=='' || password==''){
            mui.toast('请输入手机号和密码');
        }
        var url = '{php echo $this->createMobileUrl("public",array("op"=>"login"))}';
        var user_nickname = '{$fansinfo["nickname"]}'
        var openid = '{$fansinfo["openid"]}'
        var sex = '{$fansinfo["sex"]}'
        var avatar = '{$fansinfo["headimgurl"]}'
        mui.post(url,{mobile,password,user_nickname,openid,sex,avatar},function(ret){
            if(ret.code){
                mui.alert(ret.msg,'',function () {
                    location.href = '{php echo $this->createMobileUrl("member",array("op"=>"index"))}'
                });
            }else{
                mui.toast(ret.msg)
            }
        },'json');
    }
</script>
</body>
</html>